<template>
	<a-modal v-bind="option" class="pre">
		<div class="flex1 auto-y">
			<a-space :size="12" direction="vertical" style="width: 100%">
				<div>
					<b>注意</b>
					<br />
					<span>1、操作退租后不可撤销</span>
					<br />
					<span>2、确认退租后房间可立即出租。</span>
					<br />
					<span>3、选择退租，暂不结算，后付费水电表账单或预付费剩余水电费亦会自动结账，开门权限点击确认自动删除</span>
					<br />
					<span>4、操作退租后请及时与承租人结算业务</span>
				</div>
			</a-space>
		</div>

		<template #footer>
			<a-space :size="12">
				<a-button @click="operate(0)">取消</a-button>
				<a-button @click="operate(1)">退租，暂不结算</a-button>
				<a-button @click="operate(2)">退租，结算</a-button>
			</a-space>
		</template>

		<!-- 退租未结算 -->
		<batch-retreat-rent-unsettled
			v-model:visible="visibles.showRetreatRentUnsettled"
			:enter-prise-contract-id="props.enterPriseContractId"
			@success="success"
			:isShow="false" />

		<!-- 批量退租 -->
		<batch-retreat-rent
			v-model:visible="visibles.showRetreatRent"
			:enter-prise-contract-id="props.enterPriseContractId"
			:isShow="false"
			@success="success" />
	</a-modal>
</template>
<script setup lang="ts">
	import {computed, reactive, ref, watch, toRef} from 'vue'
	import BatchRetreatRent from '@/components/contract/contract-detail-dialog/charter-contract/batch-retreat-rent.vue'
	import BatchRetreatRentUnsettled from '@/components/contract/contract-detail-dialog/charter-contract/batch-retreat-rent-unsettled.vue'

	const props = defineProps<{
		visible: boolean
		enterPriseContractId?: string
		isShow?: boolean
	}>()

	const emit = defineEmits(['update:visible', 'success'])

	/** 弹窗配置 */
	const option = reactive({
		width: 1100,
		title: '退租',
		centered: true,
		keyboard: false,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		onCancel: () => cancel()
	})

	const visibles = reactive<any>({
		// 退租未结算
		showRetreatRentUnsettled: false,
		// 退租
		showRetreatRent: false
	})

	const cancel = () => {
		emit('update:visible', false)
	}

	const success = () => {
		emit('success')
		emit('update:visible', false)
	}

	const operate = (type: any) => {
		switch (type) {
			case 0:
				cancel()
				break
			case 1:
				visibles.showRetreatRentUnsettled = true
				break
			case 2:
				visibles.showRetreatRent = true
				break
		}
	}

	watch(
		() => props.visible,
		async (newVal: boolean) => {
			if (newVal) {
				// getData()
			}
		}
	)
</script>

<style lang="less" scoped>
	:deep(.vxe-table--footer-wrapper.body--wrapper) {
		overflow: hidden;
	}

	.pre {
		.ant-modal-body {
			overflow: auto;
			min-height: 400px;
			max-height: 1000px;
			height: calc(100vh - 300px);
		}
		.align-item-center {
			align-items: center;
		}
	}
</style>
